<!DOCTYPE html>
<html style="width: 100%;height: 100%;">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>
        用户申请的详情页展示
    </title>
</head>
<body style="width: 100%;height: 100%;margin-left: 0px;margin-top: 0px;" >
    <script src="/approval/static/js/jquery-3.4.1.min.js"></script>
    <script src="/approval/static/js/vue-2.4.0.js"></script>
    <script>
        var getAll=function (){
            var res=null;
            var account=sessionStorage.getItem("account");
            $.ajax({
                url:"/approval/records/getall?account="+account+"&flag=1",
                type:"GET",
                async:false,
                dataType:"json",
                success:function (response){

                   res=response
                },
                error:function (){
                    alert("访问失败");
                }

            })
            return res;
        }
        var getAll1=function (){
            var res=null;
            var account=sessionStorage.getItem("account");
            $.ajax({
                url:"/approval/records/getApproval?account="+account,
                type:"GET",
                dataType:"json",
                async:false,
                success:function (response){
                   res=response
                },
                error:function (){
                    alert("访问失败");
                }

            })
            return res;
        }
        // var isStaff=function (){
        //     var flag=false;
        //     var account=sessionStorage.getItem("account");
        //     $.ajax({
        //         url:"/approval/staff/is?account="+account,
        //         type:"GET",
        //         dataType:"text",
        //         success:function (response){
        //             if(response=="true"){
        //                 flag=true;
        //             }
        //         },
        //         error:function (){
        //             alert("访问失败");
        //         }
        //     })
        //     return flag;
        // }
        $(document).ready(function (){
           var records1= getAll();

           //var isSta=isStaff();
           var app=new Vue({
               el:"#app",
               data:{
                   records:records1,
                   l1:"active",
                   l2:"",
                   isStuff:true,

               },
               methods:{
                   li_click:function (li){
                       alert("点击事件"+li)
                       if (li=="l1"){
                           this.l1="active";
                           this.l2="";
                           this.records=getAll();
                           this.isStuff=true;
                       }else if (li=="l2"){
                           this.l1="";
                           this.l2="active";

                           this.records=getAll1();


                           this.isStuff=false;
                       }
                   },
                   bt_click:function (recordno){
                       sessionStorage.setItem("recordno",recordno);
                       window.location="/approval/static/html/Approval.html";

                   }

               }
           })


        })
    </script>
    <link type="text/css" rel="stylesheet" href="/approval/static/css/bootstrap.min.css"/>
    <div class="container" id="app" style="width: 100%;height: 100%;margin-left: 0px;margin-top: 0px;">
        <ul class="nav nav-tabs">
            <li role="presentation" v-bind:class="l1" @click="li_click('l1')"><a href="#">我的申请</a></li>
            <li role="presentation" v-bind:class="l2" @click="li_click('l2')"><a href="#">我的审批</a></li>
        </ul>
        <div class="panel panel-default" style="height: 90%;padding: 0px;width: 100%">
            <div class="panel-body">
                <!-- 下面这个表格是申请人是当前账户的申请记录-->
                <table class="table table-bordered" v-if="isStuff">
                   <thead>
                        <tr>
                            <th>申请编号</th>
                            <th>申请人</th>
                            <th>申请项目</th>

                            <th>申请时间</th>
                            <th>当前状态</th>
                            <th>申请理由</th>
                            <th>审批意见</th>


                        </tr>
                   </thead>
                    <tbody>
                        <tr v-for="record in records">

                            <td>{{record.recordno}}</td> <td>{{record.staffno}}</td>
                            <td>{{record.recordname}}</td><td>{{record.time}}</td>
                            <td>{{record.finished}}</td><td>{{record.recordopinion}}</td>
                            <td>{{record.recordopinion1}}</td>
                        </tr>
                    </tbody>
                </table>




                <!-- 下面这个表格是审批人是当前账号的审批记录-->
                <table class="table table-bordered" v-else="isStuff">
                   <thead>
                        <tr>
                            <th>申请编号</th>
                            <th>申请人</th>
                            <th>申请项目</th>

                            <th>申请时间</th>
                            <th>当前状态</th>
                            <th>申请理由</th>
                            <th>审批意见</th>


                        </tr>
                   </thead>
                    <tbody>
                    <tr v-for="record in records">

                        <td><button v-if="record.finished=='未审批'" type="button" class="btn btn-default" @click="bt_click(record.recordno)">{{record.recordno}}</button>
                            <p v-else="record.finished=='未审批'" >{{record.recordno}} </p>
                        </td>
                        <td>{{record.staffno}}</td>
                        <td>{{record.recordname}}</td>
                        <td>{{record.time}}</td>
                        <td>{{record.finished}}</td>
                        <td>{{record.recordopinion}}</td>
                        <td >
                            <p v-if="record.finished=='未审批'" class="text-danger">{{record.recordopinion1}}</p>
                            <p v-else="record.finished=='未审批'">{{record.recordopinion1}}</p>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>




</body>
</html>